<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="/Eventstar/js/jquery-1.10.2.js" ></script>

		<style>
			.box{
				width: 100%;

				height: 700px;
				box-shadow: 0 0 5px gray;

				margin: 0px auto;
				margin-bottom:20px;
				border:1px solid #92B0DD;
				background-color: #FFFFFf
			}
			.fi1{
				
				margin-left: 40px;
				
			}
			.maxa{
				height: 100px;
				
				border-bottom: 1px solid gainsboro;
			}

			.ma1{
				margin-top: 25px;
			}
			.in{
				width: 180px;
				height: 30px;
			}
			.in1{
				width: 180px;
				height: 30px;
			}
			.butt{
				width: 100px;
				height: 25px;
				background-color: darkorange;
				color: aliceblue;
				margin-left: 50px;
			}
			.max{
				margin-top: 150px;
				font-size: 20px;
			}
			.da{
				width: 180px;
			}
			* {
				margin: 0;
				padding: 0;
				font-family: '微软雅黑', sans-serif;
				box-sizing: border-box;
			}


			a {
				position: relative;
				padding: 10px 30px;
				margin: 0 45px;
				color: #21ebff;
				text-decoration: none;
				font-size: 20px;
				text-transform: uppercase;
				transition: 0.5s;
				overflow: hidden;
				-webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
			}

			a:hover {
				background: #21ebff;
				color: #111;
				box-shadow: 0 0 50px #21ebff;
				transition-delay: 0.5s;
			}

			a:nth-child(1) {
				filter: hue-rotate(115deg);
			}

			a:nth-child(3) {
				filter: hue-rotate(270deg);
			}

			a::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 10px;
				height: 10px;
				border-top: 2px solid #21ebff;
				border-left: 2px solid #21ebff;
				transition: 0.5s;
				transition-delay: 0.5s;
			}

			a:hover::before {
				width: 100%;
				height: 100%;
				transition-delay: 0s;
			}

			a::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				width: 10px;
				height: 10px;
				border-bottom: 2px solid #21ebff;
				border-right: 2px solid #21ebff;
				transition: 0.5s;
				transition-delay: 0.5s;
			}
			a:hover::after {
				width: 100%;
				height: 100%;
				transition-delay: 0s;
			}
			.a3{
				float: right;
				margin-bottom: 40px;
			}
		</style>
		<script>
			var url="http://localhost:9090/Eventstar/findwork.jsp";
			$(function(){
			$("#xs").click(function (){
				$("#box2").load(url);
			})

			})
			function shw(){
				var sh1=document.getElementById('xs');
				var sh2=document.getElementById('min1');

				sh2.style.display='none';
			}

		</script>
	</head>
	<body>
	<%@include file="tou.jsp"%>

		<div class="box">
			<div class="maxa">
				<center>
			<h1 class="fi1">作业情况</h1>
				</center>
			<div class="ma1">
				<a href="" class="a1" >添加情况</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="a2" id="xs" onclick="shw()">作业情况</a>
				<a href="/Eventstar/personal.jsp" class="a3">返回</a>
			</div>
			</div>
			<div id="box2">
				<center>
				<div class="max"  id="min1" style="display: block">
					<form action="/Eventstar/work/addwork" method="post">
						学生编号:<input type="text" name="stuid" placeholder="请输入学生编号" class="in"><br><br>
						作业情况:<input type="text" name="case" placeholder="请输入1或者2" class="in"><br><br>
						选择日期:<input type="date" name="time" class="da"><br><br>
						说明原因:<input type="text" name="remak" placeholder="此项可以不输入!" class="in1"><br><br>
						<input type="submit" value="确定添加" class="butt">
					</form>
				</div>
				</center>
			</div>
		</div>
	<%@include file="wei.jsp"%>
	</body>
</html>
